<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'任务',liner:false}"></header-top>
		<view class="ffffff mainpadding_top flexbetween">
			<view class="strongtext" style="min-width: 120rpx;">任务标题</view>
			<input type="text"  style="text-align: right;" v-model="title" placeholder="请输入标题">
		</view>
		<view class="ffffff mainpadding_top flexbetween" @click="shows=true">
			<view class="strongtext" style="min-width: 120rpx;">任务时间</view>
			<view class="flexright">
				<view class="maincolor_text margin_right">{{zdytime}}</view>
				<view class="righticon2"></view>
			</view>
		</view>
		<view class="ffffff mainpadding_top flexbetween" v-if="is_bm_fz">
			<view class="strongtext" style="min-width: 120rpx;">任务类型</view>
			<u-radio-group v-model="type" placement="row" circle>
				<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="自建任务" name="1"></u-radio>
				<u-radio activeColor="#0BBDCB" label="老板任务" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="ffffff mainpadding_top flexbetween" v-show="type==2" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
			<view class="strongtext" style="min-width: 150rpx;">选择指派人</view>
			<view class="flexright">
				<view class="maincolor_text margin_right">{{staff_name}}</view>
				<view class="righticon2"></view>
			</view>
		</view>
		<view class="yesbtn" @click="jumpurl('/pages/homepage/news/tianjiacustomer')">下一步</view>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			 @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				start: '',
				end: '',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				lat: "35.17466",
				lng: "109.67307",
				list: [],
				type:"1",
				title:"",
				staff_id:"",
				staff_name:"",
				is_bm_fz:false,//是否为部门负责人，部门负责人可以发起自建任务
			}
		},
		computed: {
			zdytime() {
				if (this.start && this.end) {
					return this.start + "至" + this.end
				}
			}
		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.staff_id = data.id
				this.staff_name = data.name
				return false
			})
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/dhtapi/user/index', 'GET', {}, false, false, true).then(res => {
					this.is_bm_fz = res.data.is_bm_fz
				})
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			confirm(e) {
				this.shows = false;
				this.showss = true;
				this.mintime = e.value;
				this.start = httpRequest.returnDate(e.value);
			},
			confirms(e) {
				this.showss = false;
				this.end = httpRequest.returnDate(e.value);
			},
			date(timer) {
				let date = new Date(timer); //当前时间				
				let year = date.getFullYear() //返回指定日期的年份				
				let month = repair(date.getMonth() + 1); //月				
				let day = repair(date.getDate()); //日				
				let curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			jumpurl() {
				if(this.title==""){
					httpRequest.toast("请输入标题")
					return false
				}
				if(this.start==""||this.end==""){
					httpRequest.toast("请选择时间")
					return false
				}
				if(this.type==2 && this.staff_id==""){
					httpRequest.toast("请选择指派人")
					return false
				}
				let data = {
					start_time: this.start,
					end_time: this.end,
					title:this.title,
					type:this.type,
					staff_id:this.staff_id
				}
				uni.navigateTo({
					url: '/pages/homepage/news/tianjiacustomer?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.lat), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.lng), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.getgoods_address, //即将传到高德或腾讯地图的店铺名称
					address: item.getgoods_address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}
	// 顶部颜色
	.topmsg {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 33rpx;
	}

	// 内容开始
	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
	}

	.smalltitle {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 33rpx;
	}

	// lable
	.itembox {
		position: relative;
	}

	// 未拜访
	.wlable {
		background-color: #fef7ec;
		position: absolute;
		right: 0;
		top: 0;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.grade {
		color: #FF0000;
		font-size: 32rpx;
		margin-left: 40rpx;
	}

	.gradetwo {
		color: #FF6B00;
	}

	.gradethree {
		color: #00B855;
	}

	.gradefour {
		color: #0075FF;
	}

	// 已拜访
	.ylable {
		background-color: #e6f8ee;
		position: absolute;
		right: 0;
		top: 0;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00b855;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.nobottom {
		padding: 20rpx 30rpx;
		background-color: #F1F1F1;
		border-radius: 10rpx;
	}

	.margin_right {
		margin-right: 30rpx;
	}

	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.xiankuan {
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.addresstext {
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}
</style>